<template>
    <div class="bg-[#fff] rounded-[1.1rem] border border-[#F3F4F6] p-[1.5rem] shadow-[0px_2px_8px_0px_#0F172A0A]">
        <p class="text-[1rem] font-[Inter] font-normal leading-[1.5rem] text-[#000000]">社区数据</p>
        <div class="grid grid-cols-2 gap-[1rem] ">
            <div class="flex items-center flex-col" v-for="item in data" :key="item.name">
                <p class="text-[1.5rem]  font-[Inter] font-bold leading-[2rem] text-[#2563EB]">{{ item.value }}</p>
                <p class="text-[0.875rem] font-[Inter] font-normal leading-[1.25rem] text-[#6B7280]">{{ item.name }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const data = ref([
    {
        name: '活跃用户',
        value: '70,000+'
    },
    {
        name: '今日发帖',
        value: '3,000+'
    }
])
</script>
<style scoped lang="scss">

</style>
